<template>
	<view class="system-message-page">
		<view v-for="(item,index) in systemMsgInfo" :key="index">
			<!-- 第一条消息 -->
			<!--  -->
			<view class="msg-1"  v-if="!item.fileName">
				<!-- 时间 -->
				<view class="time">{{item.createdAt | date('yyyy-mm-dd hh:MM:ss')}}</view>
				<view class="msg-one">
					<!-- 头像 -->
					<view class="head">
						<image src="../../static/img/logo-white.png" mode=""></image>
					</view>
					<!-- 消息内容 -->
					<view class="msg-content">
						<view class="triangle"></view>
						<view class="content">
							<text>{{item.content}}</text>
							<view class="msg-href" v-if="item.jump" @click="toApply(item)">点击参与报名</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 第二条消息 -->
			<view class="msg-2" v-else>
				<!-- 时间 -->
				<view class="time">
					{{item.createdAt | date('yyyy-mm-dd hh:MM:ss')}}
				</view>
				<!-- 头像 -->
				<view class="msg-two">
					<view class="head">
						<!-- fileName是头像地址还是图片地址 -->
						<image src="../../static/img/logo-white.png" mode=""></image>
					</view>
					<!-- 消息内容 -->
					<view class="msg-content">
						<!-- 图片 -->
						<image :src="item.fileName"></image>
						<view class="text">
							<!-- 标题 -->
							<view class="msg-title">{{item.content}}</view>
							<!-- 链接 -->
							<view class="msg-href" v-if="item.jump" @click="toApply(item)">点击参与报名</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		systemMsg
	} from '@/api/user.js'
	import {jump} from '../../utility/bannerJump.js'
	export default {
		data() {
			return {
				systemMsgInfo: []
			}
		},
		methods: {
			//跳转到报名
			toApply(item){
				jump(item)
			},
			async systemNews() {
				try{
					const res = await systemMsg({})
					this.systemMsgInfo = res.data
				} catch(e) {
					console.log(e)
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
				}
			}
		},
		created() {
			this.systemNews() //系统消息接口
		}
	}
</script>

<style lang="scss" scoped>
	.system-message-page {
		background: #F7F7F7;
		padding: 0 40rpx;
		min-height: 100%;
		.time {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #B2B4B5;
			margin-top: 30rpx;
		}
		.msg-href {
			display: block;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #00CEA7;
		
		}
		.msg-1 {
			padding: 59rpx 0 64rpx 0;
			text-align: center;

			.msg-one {
				display: flex;
				align-items: flex-start;
				padding-top: 40rpx;

				.head {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background-color: #0098DF;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 9rpx;

					image {
						width: 75rpx;
						height: 28rpx;
					}
				}

				.msg-content {
					display: flex;
					position: relative;

					.triangle {
						width: 0;
						height: 0;
						border-right: 16rpx solid #FFF;
						border-bottom: 16rpx solid transparent;
						border-left: 16rpx solid transparent;
						border-top: 16rpx solid transparent;
						position: absolute;
						top: 44rpx;
						left: -16rpx;
					}

					.content {
						line-height: 88rpx;
						background-color: #FFF;
						border-radius: 10rpx;
						margin: 0 16rpx;
						padding: 0 44rpx 0 31rpx;
						text-align: left;

						text {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
						}
					}
				}
			}

		}

		.msg-2 {

			// text-align: center;
			.time {
				text-align: center;

				text {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #B2B4B5;
				}
			}



			.msg-two {
				display: flex;
				padding-top: 43rpx;

				.head {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background-color: #0098DF;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 25rpx;

					image {
						width: 100%;
						height: 28rpx;
					}
				}

				&>.msg-content {
					background-color: #FFF;
					margin-right: 65rpx;
					width: 500rpx;
					border-radius: 10rpx;

					// display: flex;
					image {
						width: 100%;
						height: 308rpx;
						border-radius: 10rpx 10rpx 0rpx 0rpx;
					}

					.text {
						padding: 30rpx;

						.msg-title {
							font-size: 32rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 46rpx;


						}

						
					}
				}
			}
		}


	}
</style>
